<html>

<head>
    <title>3d立方体</title>
    <meta charset="utf-8">
    <style>
        body {
            background-color: black;
            height: 100%;
            /*布局方式：弹性布局*/
            display: flex;
            /*水平布局方式*/
            justify-content: center;
            /*垂直布局方式*/
            align-items: center;
            /*3d观察视角*/
            perspective: 1000px;
        }
        
        main {
            width: 200px;
            height: 200px;
            /*子元素是否保持3d变形*/
            transform-style: preserve-3d;
            /*动画名称，持续时间，速率匀速*/
            animation: spin 10s linear;
            /*动画次数 infinite无穷的*/
            animation-iteration-count: infinite;
        }
        
        img {
            width: 200px;
            height: 200px;
            /*定位方式：绝对定位*/
            position: absolute;
        }
        /*选择器*/
        
        #top {
            /*变形，translate:平移, rotate：旋转，scale：缩放*/
            transform: translateY(-100px) rotateX(90deg);
        }
        
        #bottom {
            transform: translateY(100px) rotateX(90deg);
        }
        
        #left {
            transform: translateX(-100px) rotateY(90deg);
        }
        
        #right {
            transform: translateX(100px) rotateY(90deg);
        }
        
        #front {
            transform: translateZ(100px);
        }
        
        #back {
            transform: translateZ(-100px);
        }
        /*keyframes:创建css动画*/
        
        @keyframes spin {
            /*第0帧*/
            0% {
                transform: rotateY(0deg) rotateX(0);
            }
            100% {
                transform: rotateY(360deg) rotateX(360deg);
            }
        }
    </style>
</head>

<body>
    <main>
        <img src="1.jpg" alt="" id="top">
        <img src="2.jpg" alt="" id="bottom">
        <img src="3.jpg" alt="" id="left">
        <img src="4.jpg" alt="" id="right">
        <img src="5.jpg" alt="" id="front">
        <img src="6.jpg" alt="" id="back">
    </main>
    <main>
        <img src="1.jpg" alt="" id="top">
        <img src="2.jpg" alt="" id="bottom">
        <img src="3.jpg" alt="" id="left">
        <img src="4.jpg" alt="" id="right">
        <img src="5.jpg" alt="" id="front">
        <img src="6.jpg" alt="" id="back">
    </main>
</body>

</html>